<template>
  <div class="md:flex boxx">
    <template v-if="status == 1">
      <template v-for="(item, index) in growCardList" :key="item.title" v-if="growCardList.length != 0">
        <Card size="small" :loading="loading" :title="item.title" class="md:w-1/3 w-full !mt-3 boxxchildren"
          :class="[index + 1 < 4 ]" :canExpan="false">
          <template #extra>
            <Tag :color="item.color" style="cursor: pointer;" @click="del_btn(item.ip)">{{ item.action }}</Tag>
          </template>
          <div class="py-4 px-4 flex justify-between" @click="gopage(item.ip)">
            <span class="spanh1">{{ item.name }}</span>
            <Icon icon="subway:cercle-8" color="#52c41a" class="spanh2" :size="16" v-if="item.status == 1" />
            <Icon icon="subway:cercle-8" color="#ff0000" class="spanh2" :size="16" v-else />
          </div>
  
          <div class="p-2 px-4">
            <div><span class="spanh1">{{ item.ip }}</span></div>
            <div class="itembox"><span>{{ t('routes.demo.inet.type') }}：{{ item.mtype }}</span></div>
          </div>
        </Card>
      </template>
      <div class="notice1" v-else>
        当前无可用的解调器,
        <span class="spanf1" @click="go_add">立即添加</span>
      </div>
    </template>
    <template v-else>
      <div class="notice1"> </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, onMounted, reactive, ref, Ref } from 'vue';
import { CountTo } from '/@/components/CountTo/index';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGo } from '/@/hooks/web/usePage';
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
import { useRoute } from 'vue-router';
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
//import { growCardList } from '../data';
import { get_modem, del_modem } from '/@/api/biz/index';
import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { S } from 'mockjs';
interface GrowCardItem {
  icon: string;
  title: string;
  value: number;
  total: number;
  color: string;
  name: string;
  action: string;
}
const { t } = useI18n();
defineProps({
  loading: {
    type: Boolean,
  },
});
onMounted(() => {
  get_data()
})
const status = ref(2);
const go = useGo();
function gopage(ip: string) {
  go('/modems/index?ip=' + ip);
}
function del_btn(ip: string) {
  del_modem({ ip: ip }).then((res) => {
    if (res.data.data.result.data.result == 'success') {
      message.success("删除成功！")
      get_data()
    } else {
      message.error("删除失败！")
    }
  })
}
function go_add() {
  go('/system/modemSet');
}
let growCardList: GrowCardItem[] = ref([]);
function get_data() {
  get_modem({})
    .then((res) => {
      status.value = 1;
      growCardList.value = res.data.data.result.data
      // const arr = res.data.data.result.data;
      // for (let item in arr) {
      //   growCardList.value.push(arr[item]);
      // }
      console.log(growCardList.value.length)
    }).catch(() => {
      status.value = 2
      //message.error("连接超时，请稍后再试！");
    });
}

</script>
<style>
.spanh2 {
  position: relative;
  margin-top: 6px;
}

.notice1 {
  width: 100%;
  padding-top: 150px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}

.spanf1 {
  color: #05e618;
}

.spanh1 {
  font-size: 17px;
}

.itembox {
  margin-top: 20px;
}

.boxx {
  width: 100%;
  display: flex;
  /* justify-content: space-between;  */
  flex-wrap: wrap
}

.boxxchildren {
  width: 24%;
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>